<template>
  <div class="app">
    <div class="tuan">
      <div class="header">
        <h2>爆爆团</h2>
        <h1>限时爆款 超级低价</h1>
        <div class="tabs">
          <van-tabs v-model="active"  background="orangered" color="white" line-width="20" title-inactive-color="#f5f5f5" title-active-color="white" @tabs-bottom-bar-width="20" width="100"  @click="onClick">
            <van-tab title="正在抢购"></van-tab>
            <van-tab title="即将开抢" ></van-tab>
          </van-tabs>
        </div>
      </div>
      <div class="list_box">
          <div class="list" v-for="(item,index) in list" :key="index">
            <img :src="item.picture" alt="">
            <div class="text">
              <div class="title">{{item.name}}</div>
              <div class="price">
                <div class="info">
                  <p> 爆爆团价</p>
                 <p> ￥{{item.min_price}} <span v-if="(item.promotion_info)">{{item.promotion_info}}</span></p>                
                </div>
                <button @click="handeclick(item)">{{item.status==2?"已抢":"马上抢"}}</button>
              </div>
              <div class="sold">{{item.month_saled_content}}</div>
            </div>
           
          </div>
        </div>  
      
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../../components/Footer.vue'
import {tuan_list} from "../../utils/api"
export default {
  data() {
    return {
      currentIndex:0,
      active:0,
      list:[]
    };
  },
  components:{
    Footer
  },
  mounted(){
    tuan_list({status:0}).then((res)=>{
      this.list=res.data.list
    })
  },
  methods:{
    handeclick(item){
      item.status=2
    },
    onClick(title){
      console.log(
        title
      )
      if(title=="1"){
        tuan_list({status:1}).then((res)=>{
        this.list=res.data.list})
       }else{
        tuan_list({status:0}).then((res)=>{
        this.list=res.data.list})
      }
  }}
}

</script>

<style lang="scss" scoped>
.tuan{
  background-color: orangered;
  padding: 10px;
}
.header{
  padding: 10px;
  color: white;
  text-align: center;
  h2{
    padding: 10px 0;
  }
  h1{
    margin: 10px 0;
  }
  
}
.list_box{
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  .list{
    background-color: white;
    color: black;
    display: flex;
    margin-bottom: 20px;
    img{
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }
    .text{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title{
        font-size: 18px;
        font-weight: bolder;
        
      }
      .price{
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: rgb(255, 38, 0);
        .info span:last-child{
          font-size: 12px;
          color: hotpink;
          border: 1px solid hotpink;
        }
        button{
          width: 80px;
          height: 30px;
          border-radius: 15px;
          border: none;
          background-color: rgb(255, 38, 0);
          color: white;
          position: absolute;
          right: 20px;
        }
      }
    }
  }
}
</style>